{extend name="public/base" /}
{block name="css"}
<style>
  .main-container {
    background: #F5F5F5;
    text-align: center;
  }

  .tab {
    padding: 15px 30px 8px;
    display: flex;
    border-bottom: 1px #E6E6E6 solid;
    background: #ffffff;
    position: fixed;
    width: 100%;
  }

  .tab > div {
    color: #999999;
    font-size: 17px;
    cursor: pointer;
    flex: 1;
  }

  .tab > div > .selected {
    padding-bottom: 8px;
    color: #333333;
    border-bottom: 3px #333333 solid;
  }

  .content {
    padding-top: 50px;
  }

  .content > div {
    padding: 20px 15px 0px;
  }

  .item {
    background: rgba(255,255,255,1);
    box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    margin-bottom: 18px;
  }

  .item > img {
    width: 100%;
    border-radius: 8px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .item > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 15px;
  }

  .item > div > span {
    color: #333333;
    font-size: 18px;
  }

  .item > div > img {
    width: 20px;
    height: 20px;
  }

  #effect, #vr {
    display: none;
  }

</style>
{/block}
{block name="main"}
<section class="container-fluid main-container">
  <div class="tab">
    <div>
      <span class="scene selected">实景案例</span>
    </div>
    <div><span class="effect">效果图案例</span></div>
    <div><span class="vr">VR案例</span></div>
  </div>
  <div class="content">
    <div id="scene">
      {volist name='list' id='item'}
      <div class="item" onclick="window.location.href='{$Request.root}/case/{$item.id}.html'">
        <img loading="lazy" src="{$item.cover}" />
        <div>
          <span>{$item.building}丨{$item.style|getStyle}丨{$item.housing}</span>
          <img src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/cases/mobile/arrow-right.png">
        </div>
      </div>
      {/volist}
    </div>
    <div id="effect">
      {volist name='list' id='item'}
      <div class="item" onclick="window.location.href='{$Request.root}/case/{$item.id}.html'">
        <img loading="lazy" src="{$item.cover}" />
        <div>
          <span>{$item.building}丨{$item.style|getStyle}丨{$item.housing}</span>
          <img src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/cases/mobile/arrow-right.png">
        </div>
      </div>
      {/volist}
    </div>
    <div id="vr">
      {volist name='list' id='item'}
      <div class="item" onclick="window.location.href='{$Request.root}/case/{$item.id}.html'">
        <img loading="lazy" src="{$item.cover}" />
        <div>
          <span>{$item.building}丨{$item.style|getStyle}丨{$item.housing}</span>
          <img src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/cases/mobile/arrow-right.png">
        </div>
      </div>
      {/volist}
    </div>
  </div>
</section>
{/block}
{block name="js"}
{load href="https://ujia-res.oss-cn-shenzhen.aliyuncs.com/common/third-party/echo/1.4.0/echo.js" /}
<script>
    $('#nav').find('ul > li').eq(3).addClass('nav-active');
    $("#nav").scrollLeft(65*3);

    Echo.init({
        offset: 0,
        throttle: 0
    });

    $('.scene').on('click', function () {
        $('.scene').addClass('selected');
        $('.effect').removeClass('selected');
        $('.vr').removeClass('selected');

        $('#scene').show();
        $('#effect').hide();
        $('#vr').hide();
    });
    
    $('.effect').on('click', function () {
        $('.effect').addClass('selected');
        $('.scene').removeClass('selected');
        $('.vr').removeClass('selected');

        $('#scene').hide();
        $('#effect').show();
        $('#vr').hide();
    });

    $('.vr').on('click', function () {
        $('.vr').addClass('selected');
        $('.scene').removeClass('selected');
        $('.effect').removeClass('selected');

        $('#scene').hide();
        $('#effect').hide();
        $('#vr').show();
    });
</script>
{/block}